<template>
    <div class="login">
        <van-form>

            <van-cell-group inset>

                <van-field autofocus size="large" v-model="phone" name="手机号" label="手机号" placeholder="手机号" />

                <van-field size="large" v-model="code" name="验证码" label="验证码" placeholder="验证码" />
            </van-cell-group>
            <div class="btn">
                <button @click="fetchCode">获取验证码</button>
            </div>
            <div style="margin: 16px;">
                <van-button @click="onSubmit" round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>

        </van-form>
    </div>

</template>

<script>
import { getCode, login } from '../../api/login'
export default {
    name: "",
    data() {
        return {
            phone: '13199887766',
            code: ''
        }
    },
    methods: {
        async fetchCode() {
            this.code = (await getCode(this.phone)).code
        },
        async onSubmit() {

            let res = await login({ phone: this.phone, code: this.code })
            this.$store.dispatch('acToken', res.token)
            if (this.$route.query.cart === '1') {
                this.$router.replace('/cart')

            } else {
                this.$router.replace('/mine')
            }
        }
    }

}
</script>

<style lang="less" scoped>
.login {
    width: 375px;
    height: 617px;
    background: #999;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
        margin-left: 70%;
        margin-top: 10px;
    }
}
</style>